<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="decorator" content="default" />
		<title>任务</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body>
		<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->

						<div class="row">
							<div class="col-sm-6 widget-container-span">
								<div class="widget-box">
									<div class="widget-header header-color-blue2">
										<h4 class="lighter smaller">Choose Categories</h4>
									</div>

									<div class="widget-body">
										<div class="widget-main padding-8">
											<div id="tree1" class="tree"></div>
										</div>
									</div>
								</div>
							</div>

							<div class="col-sm-6 widget-container-span">
								<div class="widget-box">
									<div class="widget-header header-color-green2">
										<h4 class="lighter smaller">Browse Files</h4>
									</div>

									<div class="widget-body">
										<div class="widget-main padding-8">
											<div id="tree2" class="tree"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<script type="text/javascript">
							var $assets = "assets";//this will be used in fuelux.tree-sampledata.js
						</script>

						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
				
		<script src="${ctx}/static/ace/assets/js/fuelux/data/fuelux.tree-sampledata.js"></script>
		<script src="${ctx}/static/ace/assets/js/fuelux/fuelux.tree.min.js"></script>
		<script type="text/javascript">
			jQuery(function($){
				$('#tree1').ace_tree({
					dataSource: treeDataSource ,
					multiSelect:true,
					loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
					'open-icon' : 'icon-minus',
					'close-icon' : 'icon-plus',
					'selectable' : true,
					'selected-icon' : 'icon-ok',
					'unselected-icon' : 'icon-remove'
				});
		
				$('#tree2').ace_tree({
					dataSource: treeDataSource2 ,
					loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
					'open-icon' : 'icon-folder-open',
					'close-icon' : 'icon-folder-close',
					'selectable' : false,
					'selected-icon' : null,
					'unselected-icon' : null
				});
		
		
		
				/**
				$('#tree1').on('loaded', function (evt, data) {
				});
		
				$('#tree1').on('opened', function (evt, data) {
				});
		
				$('#tree1').on('closed', function (evt, data) {
				});
		
				$('#tree1').on('selected', function (evt, data) {
				});
				*/
				
				
				// Portlets (boxes)
			    $('.widget-container-span').sortable({
			        connectWith: '.widget-container-span',
					items:'> .widget-box',
					opacity:0.8,
					revert:true,
					forceHelperSize:true,
					placeholder: 'widget-placeholder',
					forcePlaceholderSize:true,
					tolerance:'pointer'
			    });
		});
	</script>
	</body>
</html>